<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>WebSocktTest - 广播</title>
</head>
<body>
<div>
    <button id="connect" type="button" onclick="connect();">连接</button>
    <button id="disconnect" type="button" onclick="disconnect();">断开连接</button>
</div>
<div id="conversationDiv">
    <label>输入你的名字<input type="text" id="name" name="name"></label>
    <button id="sendName" type="button" onclick="sendMessage();">发送</button>
    <p id="response"></p>
</div>
</body>
</html>
<script src="/weBlog/static/js/sockjs-0.3.js"></script>
<script src="/weBlog/static/js/stomp.js"></script>
<script type="text/javascript">

    var stompClient = null;

    function connect() {
        var socket  = new SockJS('/weBlog/endpointWisely');
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function (frame) {
//            setConnected(true);
            console.log("connected: " + frame);
            stompClient.subscribe('/topic/getResponse', function (response) {
                showResponse(JSON.parse(response.body).responseMessage);
            })
        })
    }

    function disconnect() {
        if (stompClient != null) {
            stompClient.disconnect();
        }
        console.log("Disconnect")
    }

    //向服务端发送消息
    function sendMessage() {
        var name = document.getElementById("name").value;
        stompClient.send("/welcome", {}, JSON.stringify({'name': name}))
    }

    function showResponse(message) {
        document.getElementById("response").innerHTML= message;
    }
</script>